<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板解析_表达式</title>
    <script src="../js/mvvm/compile.js"></script>
    <script src="../js/mvvm/mvvm.js"></script>
    <script src="../js/mvvm/observer.js"></script>
    <script src="../js/mvvm/watcher.js"></script>
</head>
<body>
<div id="test">
    <p>{{name}}</p>
</div>
<script>
    /*模板解析的基本流程
    1) 将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象
    2) 对 fragment 中的所有层次子节点递归进行编译解析处理
        * 对大括号表达式文本节点进行解析
        * 对元素节点的指令属性进行解析
            * 事件指令解析
            * 一般指令解析
    3) 将解析后的 fragment 添加到 el 中显示
    */
    const vm = new MVVM({
        el:"#test",
        data:{
            name:"wjc1"
        }
    });
</script>
</body>
</html>